<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
      background-size: 100% 130%;
    }

    .login_box{
      width: 20%;
      height: 400px;
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    .input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    .input_box input{
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    .login_box  button{
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }
    .sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a{
      color: #b94648;
    }
    .login_box  button  a{
      color: #fff;
    }
    .forget{
      color: white;
      margin-top: 20px;
      /* background-color: #30cfd0; */
    }
  </style>
  <title>注册/登录</title>
  <link rel="stylesheet" href="../css/commit.css">
  <!-- <link rel="stylesheet" href="style.css"> -->

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 中间 -->
<div class="login_box">
  <h2>LOGIN</h2>
  <form role="form" action="/zjslogin" method="post">
  <div class="input_box">
    <input type="text" id="name" name="name" class="form-control" placeholder="Username" required="" autofocus="">
  </div>
  <div class="input_box">
    <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
  </div>
  <button><a href="htmlindex">登录</a></button><br>
  <p class="forget">忘记密码?<a href="#">
    点击这里
  </a></p>
  <p class="forget">没有账户?<a href="degin.html">
   <a href="/api/zhuce">注册</a>
  </a></p>
</div>
</form>
</body>
</html>
<script src="../../../layui/layui.js"></script>
<script>
  layui.use(function () {
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;

    // 自定义验证规则
    form.verify({
      // 确认密码
      confirmPassword: function (value, item) {
        var passwordValue = $('#reg-password').val();
        if (value !== passwordValue) {
          return '两次密码输入不一致';
        }
      }
    });

    // 提交事件
    form.on('submit(demo-reg)', function (data) {
      var field = data.field; // 获取表单字段值
      // 是否勾选同意
      if (!field.agreement) {
        layer.msg('您必须勾选同意用户协议才能注册');
        return false;
      }

      // 显示填写结果，仅作演示用
      // layer.alert(JSON.stringify(field), {
      //     title: '当前填写的字段值'
      // });

      // 此处可执行 Ajax 等操作
      // …
      // 转换成json
      var jsonf = JSON.stringify(field);
      // layer.msg(jsonf);
      $.ajax({
        url: '/zjsloginRequest', // Spring MVC 控制器路径
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: jsonf,
        // 服务器端返回的预期数据类型
        // dataType: 'json',
        // 发送成功以后的回调函数
        success: function (successResponseData) {
          // 请求成功后的操作
          layer.msg(successResponseData);
        },
        // 发送失败后的回调函数
        error: function (failedResponseData) {
          // 请求失败的操作
          layer.msg(failedResponseData);
        }
      });

      return false; // 阻止默认 form 跳转
    });

    // 普通事件
    util.on('lay-on', {
      // 获取验证码
      'reg-get-vercode': function (othis) {
        var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
        // 验证通过
        if (isvalid) {
          layer.msg('手机号规则验证通过');
          // 此处可继续书写「发送验证码」等后续逻辑
          // …
        }
      }
    });
  });
</script>